<template>
  <view class="safe-area-inset-bottom">
    <view class="swip_header">
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="name"
              type="text"
              @confirm="handleQuery"
              @input="handleQuery"
              :placeholder="(tabIndex == 2)?'请输入印章类型名称':'请输入印章名称'"/>
        </view>
      </view>
      <view class="swiplist">
        <swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
        <button v-if="tabIndex != 1" size="mini" class="add_btn" @click="handleAdd">
          <i class="iconfont themeColor">&#xeaf3;</i>
          <span class="themeColor">新增</span>
        </button>
      </view>
    </view>
    <view class="listSwiperTop">
      <!-- 常用印章 -->
      <seal-common v-if="tabIndex == 0" ref="sealCommon" :name="name"/>
      <!-- 停用印章 -->
      <seal-disable v-if="tabIndex == 1" ref="sealDisable" :name="name"/>
      <!-- 印章类型 -->
      <seal-type v-if="tabIndex == 2" ref="sealType" :name="name"/>
    </view>
  </view>
</template>

<script>
import sealCommon from "./sealCommon";
import sealDisable from "./sealDisable";
import sealType from "./sealType";
import swiperTabHead from "@/components/slideTab/slideTab";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';

export default {
  components: {luanqingEmpty, swiperTabHead, sealCommon, sealDisable, sealType},
  data() {
    return {
      // tab标签
      tabList: [
        {title: '企业印章'}, {title: '停用印章'}, {title: '印章类型',}
      ],
      // 当前选中
      tabIndex: 0,
      // 查询参数
      name: undefined,
    }
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.tabIndex == 0) {
      this.$refs.sealCommon.loadMore()
    } else if (this.tabIndex == 1) {
      this.$refs.sealDisable.loadMore()
    } else {
      this.$refs.sealType.loadMore()
    }
  },
  methods: {
    /** 接受子组件传过来的值点击切换导航 */
    tabtap(index) {
      // 标记已选项
      this.tabIndex = index;
      // 清空搜索框
      this.name = undefined;
      // 滚动到页面的目标位置
      uni.pageScrollTo({scrollTop: 0, duration: 300});
      // 查询数据列表
      this.handleQuery();
    },
    /** 搜索 */
    handleQuery() {
      this.$nextTick(() => {
        if (this.tabIndex == 0) {
          this.$refs.sealCommon.handleQuery()
        } else if (this.tabIndex == 1) {
          this.$refs.sealDisable.handleQuery()
        } else {
          this.$refs.sealType.handleQuery()
        }
      })
    },
    /** 新增 */
    handleAdd() {
      if (this.tabIndex == 0) {
        this.$refs.sealCommon.handleAdd()
      } else if (this.tabIndex == 1) {
        this.$refs.sealDisable.handleAdd()
      } else {
        this.$refs.sealType.handleAdd()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
